<template>
  <div class="ind-report-view">
    <report-paper
      v-model="reportContent"
      ref="reportPaper"
      :editable="editable"
      class="report-paper"
      @change="onReportContentChange"></report-paper>
    <el-button
      v-show="editable"
      :disabled="!reportEdited"
      type="primary"
      size="small"
      class="save-btn"
      @click="saveReport">
      保存
    </el-button>
    <!-- <el-button v-if="!editable && reportContent" icon="el-icon-download" type="text" @click="downloadReport">
      下载报告
    </el-button> -->
  </div>
</template>

<script>
import ReportPaper from '@com/ReportPaper.vue'
import { IND_TYPE } from '@utility/dict'
import { getIndReportViewContent } from '@api/modules/indication'
import { modifyReportContent, downloadReport } from '@api/modules/report'

export default {
  name: 'IndReportView',
  components: { ReportPaper },
  props: {
    orgId: {
      type: String,
    },
    editable: {
      type: Boolean,
    },
    id: {
      type: Number,
    },
    // reportId: {
    //   type: Number,
    // },
  },
  data() {
    return {
      reportEdited: false,
      LZNL_TYPE: IND_TYPE.lznl,
      reportIdInner: '',
      reportContent: '',
    }
  },
  computed: {},
  watch: {
    orgId() {
      this.getReportDetails()
    },
    reportEdited(val) {
      this.$emit('report-edited', val)
    },
    reportId() {
      this.getReportContentById()
    },
  },
  created() {
    // if (this.reportId) {
    //   this.getReportContentById()
    // } else if (this.id) {
    //   this.getReportDetails()
    // }
    // 新版本统一到一个接口
    if (this.id) {
      this.getReportDetails()
    }
  },
  mounted() {},
  methods: {
    onReportContentChange(val) {
      if (val && !this.reportEdited) {
        this.reportEdited = true
      }
    },
    getReportDetails() {
      if (this.reportEdited) {
        this.reportEdited = false
      }
      this.reportContent = ''
      this.reportIdInner = ''
      getIndReportViewContent(this.id, this.orgId).then(res => {
        if (res.code === 0) {
          const resData = res.data
          if (resData) {
            this.reportContent = resData.content
            this.reportIdInner = resData.id
          }
        }
      })
    },
    saveReport() {
      modifyReportContent({ id: this.reportIdInner, content: this.reportContent }).then(res => {
        if (res.code === 0) {
          this.$message.success('保存成功！')
        }
      })
    },
    downloadReport() {
      downloadReport(this.reportIdInner)
    },
    // getReportContentById() {
    //   getReportContent(this.reportId).then(res => {
    //     if (res.code === 0) {
    //       const resData = res.data
    //       this.reportContent = resData.content
    //       this.reportIdInner = this.reportId
    //     }
    //   })
    // },
  },
}
</script>
<style lang="scss" scoped>
.ind-report-view {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .report-paper {
    flex: 1;
  }
  .save-btn {
    width: 140px;
    margin-bottom: 10px;
  }
}
</style>
